import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

import 'Utilities.js' as Utilities

Rectangle {
    id: root
    color: Kontrast.bkcolor

    ScrollView {
        anchors.fill: parent
        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff

    ////////////////////////////////////////////SCROLLVIEW BEG
    GridLayout {
        width: root.width
        height: root.height

        columns: width<600 ? 1 : 2

        ColumnLayout {
            Layout.columnSpan: parent.columns==1 ? 1 : 2

          Label {
              property real cr: 0.0

              Layout.fillWidth: true
              wrapMode: Text.WordWrap
              font.pixelSize: 22
              color: Kontrast.color
              text: 'Contrast ratio: '+Utilities.contrast(Kontrast.color, Kontrast.bkcolor).toFixed(2);
          }

          Label {
              Layout.fillWidth: true
              wrapMode: Text.WordWrap
              font.pixelSize: 20
              color: Kontrast.color
              text: Utilities.get_font_size_quality_label(Utilities.contrast(Kontrast.color, Kontrast.bkcolor), font_size_slider.value)
          }

          Label {
              Layout.fillWidth: true
              wrapMode: Text.WordWrap
              font.pixelSize: 18
              color: Kontrast.color
              text: {
                  const contrast = Utilities.contrast(Kontrast.color, Kontrast.bkcolor)
                  return contrast > 7 ? "Perfect for normal and large text"
                                         : contrast > 4.5 ? "Perfect for large text and good for normal text"
                                                                   : contrast > 3.0 ? "Good for large text and bad for normal text"
                                                                                             : "Bad for large and normal text"
              }
          }

          Label {
              Layout.fillWidth: true
              wrapMode: Text.WordWrap
              font.pixelSize: 18
              color: Kontrast.color
              text: 'Contrast is the difference in luminance or color that makes an object (or its representation in an image or display) distinguishable. In visual perception of the real world, contrast is determined by the difference in the color and brightness of the object and other objects within the same field of view.'
          }
        }

        ColumnLayout {
            Layout.row: 1
            Layout.column: 0
            Layout.fillWidth: true
            Layout.horizontalStretchFactor: 1
            Label { text: 'Text'; font.pixelSize: 14; color: Utilities.display_text_color()}
            RowLayout {
                Label {
                    id: text_color
                    text: Kontrast.color
                    font.pixelSize: 54
                    color: Utilities.display_text_color()
                }
                RoundButton {
                    Layout.preferredWidth: 35
                    Layout.preferredHeight: 35
                    radius: 5
                    icon.source: './icons/actions/color-picker-symbolic.png'
                    onClicked: {
                        Kontrast.pick()
                    }
                }
            }
            Label { text: 'Hue: '+Kontrast.color.hslHue; font.pixelSize: 14; color: Utilities.display_text_color()}
            MySlider {
                Layout.fillWidth: true
                from: 0; to: 1
                value: Kontrast.color.hslHue
                onMoved: {
                    Kontrast.color = Qt.hsla(value, Kontrast.color.hslSaturation, Kontrast.color.hslLightness, 1)
                }
            }
            Label { text: 'Saturation: '+Kontrast.color.hslSaturation; font.pixelSize: 14; color: Utilities.display_text_color()}
            MySlider {
                Layout.fillWidth: true
                from: 0; to: 1
                value: Kontrast.color.hslSaturation
                onMoved: {
                    Kontrast.color = Qt.hsla(Kontrast.color.hslHue, value, Kontrast.color.hslLightness, 1)
                }
            }
            Label { text: 'Lightness: '+Kontrast.color.hslLightness; font.pixelSize: 14; color: Utilities.display_text_color()}
            MySlider {
                Layout.fillWidth: true
                from: 0; to: 1
                value: Kontrast.color.hslLightness
                onMoved: {
                    Kontrast.color = Qt.hsla(Kontrast.color.hslHue, Kontrast.color.hslSaturation,  value, 1)
                }
            }
        }

        Rectangle {
            Layout.row: 2
            Layout.fillWidth: true
            Layout.margins: 15
            Layout.preferredHeight: 1
            visible: parent.columns==1
            color: Utilities.display_text_color()
        }

        ColumnLayout {
            Layout.row: parent.columns==1 ? 3 : 1
            Layout.column: parent.columns==1 ? 0 : 1

            Layout.fillWidth: true
            Layout.horizontalStretchFactor: 1
            Label { text: 'Background'; font.pixelSize: 14; color: Utilities.display_text_color()}
            RowLayout {
                Label {id: background_color; text: Kontrast.bkcolor; font.pixelSize: 54; color: Utilities.display_text_color()}
                RoundButton {
                    Layout.preferredWidth: 35
                    Layout.preferredHeight: 35
                    radius: 5
                    icon.source: './icons/actions/color-picker-symbolic.png'
                    onClicked: {
                        Kontrast.pick(true)
                    }
                }
            }
            Label { text: 'Hue: '+Kontrast.bkcolor.hslHue; font.pixelSize: 14; color: Utilities.display_text_color()}
            MySlider {
                Layout.fillWidth: true
                from: 0; to: 1
                value: Kontrast.bkcolor.hslHue
                onMoved: {
                    Kontrast.bkcolor = Qt.hsla(value, Kontrast.bkcolor.hslSaturation,  Kontrast.bkcolor.hslLightness, 1)
                }
            }
            Label { text: 'Saturation: '+Kontrast.bkcolor.hslSaturation; font.pixelSize: 14; color: Utilities.display_text_color()}
            MySlider {
                Layout.fillWidth: true
                from: 0; to: 1
                value: Kontrast.bkcolor.hslSaturation
                onMoved: {
                    Kontrast.bkcolor = Qt.hsla(Kontrast.bkcolor.hslHue, value,  Kontrast.bkcolor.hslLightness, 1)
                }
            }
            Label { text: 'Lightness: '+Kontrast.bkcolor.hslLightness; font.pixelSize: 14; color: Utilities.display_text_color()}
            MySlider {
                Layout.fillWidth: true
                from: 0; to: 1
                value: Kontrast.bkcolor.hslLightness
                onMoved: {
                    Kontrast.bkcolor = Qt.hsla(Kontrast.bkcolor.hslHue, Kontrast.bkcolor.hslSaturation, value, 1)
                }
            }
        }

        ColumnLayout {
            Layout.columnSpan: parent.columns==1 ? 1 : 2

            Label { text: 'Font size: '+font_size_slider.value; font.pixelSize: 14; color: Utilities.display_text_color()}
            MySlider {
                id: font_size_slider
                Layout.preferredWidth: 100
                snapMode: Slider.SnapAlways
                stepSize: 1
                from: 1; to: 24
                value: 12
            }
        }

        RowLayout {
            Layout.columnSpan: parent.columns==1 ? 1 : 2

            RoundButton {
                Layout.preferredWidth: 70
                radius: 5
                icon.source: './icons/actions/reverse-symbolic.png'
                text: 'Invert'
                onClicked: {
                    const temp = Qt.rgba(Kontrast.color.r, Kontrast.color.g, Kontrast.color.b, 1)
                    Kontrast.color = Qt.rgba(Kontrast.bkcolor.r, Kontrast.bkcolor.g, Kontrast.bkcolor.b, 1)
                    Kontrast.bkcolor = temp
                }
            }
            RoundButton {
                Layout.preferredWidth: 100
                radius: 5
                icon.source: './icons/actions/randomize-symbolic.png'
                text: 'Randomize'
                onClicked: Utilities.random_color()
            }
            RoundButton {
                Layout.preferredWidth: 120
                radius: 5
                icon.source: './icons/actions/favorite-symbolic.png'
                text: 'Mark as Favorite'
                onClicked: Kontrast.mark_favorite()
            }
        }

        Item {
            Layout.fillHeight: true //-SPACER
        }
    }

    ////////////////////////////////////////////SCROLLVIEW END
    }

    Component.onCompleted: Utilities.random_color()
}
